Page Layout Basics > Using the layout grid
 		><

Using the layout grid


When you add text and objects directly to your Web page, the page layout reflows according to your viewer's Web browser settings. To make sure that your page appears as you intended, you can place text and objects on a layout grid. When you add a layout grid to a page, Adobe GoLive actually generates tables in the HTML source code for the page. It uses these tables to place the text and objects on the page with 1-pixel accuracy.

Important: If you use a layout grid to design your page, your viewer's browser must support tables to display the page accurately. Most browsers now support tables. Obsolete browsers, such as Netscape Navigator 2.0, have problems displaying some tables accurately.

To insert a layout grid:

1 Choose Window > Objects.

2 In the Objects palette, click the Basic tab ().

3 Drag the Layout Grid icon from the Objects palette to your document window, or double-click the icon in the Objects palette.

Note: Adobe GoLive inserts a <SPACER> tag in the HTML table that constitutes the layout grid. This tag resolves a bug in Netscape browsers that causes a rounding of table widths. Microsoft Internet Explorer ignores this tag. As a result, your HTML code is displayed properly by all browsers.

4 Choose Window > Inspector.

5 To resize the layout grid, do one of the following:
  • Click the edge of the grid to display the resize handles, and drag its handles. The new width and height of the grid appears in the Layout Grid Inspector.


    •
    To resize layout grid, select handle and drag in desired direction.
  • In the Layout Grid Inspector, enter the desired measurements for Width and Height.
  • If you have finished laying out objects on the grid, click Optimize in the Layout Grid Inspector to automatically reduce the size of the grid to its minimum size.

    • To minimize page scrolling in a viewer's browser, make sure that the final width of the layout grid is no larger than 580 pixels, the width of a standard 14-inch monitor.

    6 To further customize the layout grid, do any of the following in the Layout Grid Inspector:
  • To change the spacing between the horizontal or vertical lines of the grid, enter values in pixels for Horizontal or Vertical.
  • To make objects snap to the horizontal or vertical lines of the grid, select Snap for Horizontal or Vertical. Deselect this option if you want to position objects freely horizontally or vertically on the grid.

    • To move a selected object in increments equivalent to the spacing between the grid lines, select Snap for Horizontal and Vertical in the Layout Grid Inspector, and press the arrow keys. To move a selected object pixel by pixel on the grid, deselect Snap for Horizontal and Vertical, and press the arrow keys.

  • To display the horizontal or vertical lines of the grid, select Visible for Horizontal or Vertical. Deselect this option to hide the horizontal or vertical grid lines.

    • To speed up the display when viewing your page layout in Layout view, hide the lines of the grid. The grid is still active when its lines are hidden.

  • To set the position of the grid in relation to the document window, choose an alignment from the Align pop-up menu in the Layout Grid Inspector. Choose Default to use the settings of the surrounding HTML container to align the grid.

    • Note: If you want to center the grid in relation to the document window, select the grid and click the Align Center button () on the toolbar.
  • To apply a background color to the grid, select Background Color. Click inside the color field for Background Color to select it. Then select a color in the Color palette. For instructions on using the Color palette, see Working with color.

    • Page Layout Basics > Using the layout grid